<template>
	<div class="wrap">
		<h2 class="title">系统日志</h2>
		<el-table
			:data="log"
			:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
			:row-style="tableRowClassName"
			:fit="true">
			<el-table-column prop="opId" label="日志编号"  />
			<el-table-column prop="opDetail" label="日志内容"/>
			<el-table-column prop="opName" label="操作人员" />
			<el-table-column prop="opTime" label="操作时间" >
				<template #default="{row}">
				{{ new Date(row.opTime).toLocaleDateString() }}
				</template>
			</el-table-column>
		</el-table>
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				small="small"
				:background="true"
				layout="total, prev, pager, next"
				:total="total"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getAllSysLogs } from '@/utils/axios/master'
import { getOpInfoAll } from '@/utils/axios/getTotal';

const log = ref([])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])
const total=ref(0)

// 处理每页大小变化
const handleSizeChange = async (val) => {
	let { data } = await getAllSysLogs({ currentPage: currentPage.value, pageSize: val })
	log.value = data
}
//当前页变化
const handleCurrentChange = async (val) => {
	let { data } = await getAllSysLogs({ currentPage: val })

	log.value = data
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

onMounted(async () => {
	let { data } = await getAllSysLogs({ currentPage: currentPage.value ,pageSize:pageSize.value})
	let res=await getOpInfoAll()
	console.log(data);
	total.value=res.data
	log.value = data
})
</script>

<style scoped lang="scss">

</style>
